<template>
  <div class="system-setting">
    <p><a-checkbox v-model:checked="formData.tip">温馨提示</a-checkbox></p>
    <p><a-checkbox v-model:checked="formData.voice">声音</a-checkbox></p>
    <p><a-checkbox v-model:checked="formData.auto">自动运行</a-checkbox></p>
    <p style="margin-bottom: 24px;">语言：
      <a-select v-model:value="formData.lang" style="width: 200px;">
        <a-select-option value="cn">简体中文</a-select-option>
        <a-select-option value="jp">日语</a-select-option>
      </a-select>
    </p>
    <p><a-button type="primary">保存</a-button></p>
  </div>
</template>

<script setup>
import {reactive} from "vue";

const formData = reactive({
  tip: false,
  voice: false,
  auto: false,
  lang: 'cn'
})
</script>

<style lang="less" scoped>
.system-setting{
  p{
    margin-bottom: 16px;
  }
  .ant-btn{
    width: 80px;
  }
  :deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner) {
    border-color: #193D96;
  }
  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    background: #193D96;
  }
}
</style>